<template>
  <div class="bar-chart-08 chart" ref="barChart08"></div>
</template>

<script setup>
import { ref, onMounted, inject } from "vue";
const barChart08 = ref(null);
const echarts = inject("$echarts");

// 参数
let bgImg =
  "image://";
let barImg =
  "image://";
let yAxisData = ['NO.1', 'NO.2', 'NO.3', 'NO.4', 'NO.5'];
let seriesData = [290, 234, 191, 185, 148];
let barWidth = 20;
let maxNum = 0;
for (let i = 0; i < seriesData.length; i++) {
  if (seriesData[i] > maxNum) {
    maxNum = seriesData[i];
  }
}

const option = {
  compCode: 'C202310020',
  backgroundColor: "block",
  grid: {
    top: "10%",
    left: "20%",
    right: "10%",
    bottom: "0%",
  },
  xAxis: {
    show: false,
  },
  yAxis: {
    data: yAxisData,
    inverse: true,
    offset: 55,
    splitLine: {
      show: false,
    },
    axisLabel: {
      show: true,
      align: "left",
      textStyle: {
        color: "#66cc00",
      },
      formatter: function (value, index) {
        let num = "";
        let str = "";
        const no = "NO.";
        num = index + 1;
        if (index === 0 || index === 1 || index === 2) {
          str = "{no|" + value + "}";
        } else {
          str = "{no1|" + value + "}";
        }
        return str;
      },
      rich: {
        no: {
          color: "#fff",
          width: 50,
          height: 20,
          fontSize: 14,
          align: "center",
          borderWidth: 3,//设置边框粗细
          borderColor: '#3681C2',
          padding: [3, 0, 0, 0]
        },
        no1: {
          color: "#fff",
          width: 50,
          height: 20,
          fontSize: 14,
          padding: [3, 0, 0, 0]
        }
      },
    },
    axisLine: {
      show: false,
    },
    axisTick: false,
  },
  series: [
    {
      type: "pictorialBar",
      barWidth: barWidth,
      zlevel: 2,
      data: seriesData.map(function (item) {
        return {
          value: item,
          symbol: barImg,
        };
      }),
    },
    {
      type: "pictorialBar",
      barWidth: barWidth,
      data: seriesData.map(function (item) {
        return {
          realValue: item,
          value: maxNum,
          symbol: bgImg
        };
      }),
      label: {
        show: true,
        position: "right",
        distance: 80,
        align: "right",
        formatter: function (params) {
          return params.data.realValue + " 件";
        },
        color: "#02afff",
        fontSize: 18,
      },
    },
  ],
};


onMounted(() => {
  const chart = echarts.init(barChart08.value);
  chart.setOption(option);
});
</script>

<style scoped></style>
